【前端卡顿的优化思路和方案01】webpack从2.2.1升级到webpack4全纪录（目前先升级到webpack3.8.1）

背景

• 目前的webpack的版本是 2.2.1，而webpack目前的最新版本已经更新到了4.39.3

直接需求

• 前端页面比较卡顿

原因1

• 文件都是采用的require的按需加载的模式，点击到大文件的时候，加载时间较长。某个页面要加载的js文件2.4m，需要2-3秒才能加载完

原因2

• 首页内容过多，会发出许多http请求，如果此时点击其他页面，会导致请求进入了排队队列，要等到首页的请求完成才能开始。比如点进去首页直接点击某个顶部菜单栏页面，Queueing 的时间长达 6.77 s，之后才开始发送当前页面的请求。而总共的加载时间只有7.10 s

解决办法

原因1

• 方法1：采用 prefetch 预加载，在首页空闲时间就开始加载后续其他页面的文件。
• 方法2：后端nginx做代码压缩，可以把2.4m的文件压缩到300k左右。

原因2

• 针对首页的请求过多，可以对诸如滚动新闻栏的信息，做滚动懒加载，避免首页处理过多的请求。

目前的优化开发计划

• 解决 原因1 中的 方法1
• 采用 preload-webpack-plugin 这个插件
• 官方文档

var PreloadWebpackPlugin = require('preload-webpack-plugin');
// rel 可选 'prefetch' / 'preload'
// include 会匹配有按照这个字段命名的 打包文件
...
new PreloadWebpackPlugin({
      rel: 'prefetch',
      include: 'Flow'
    }),

• 关于预加载的 preload 和 prefetch
• 实际上，webpack4 就能够直接设置预加载及给预加载排序，下一步升级到webpack4后会做此优化。参考文档

引发的开发需求

• 因为命名 chunk，要使用一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。所以要进行webpack升级，第一步是先升级到 webpack 3.8.1

• 相关文档

  • 【前端卡顿的优化思路和方案02】实现webpack的chunk文件的命名
  • 【前端卡顿的优化思路和方案03】升级babel7注意事项